<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="queryOrderList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <!-- <el-button type="primary" :icon="CirclePlus" >创建新订单</el-button> -->
      </template>
      <template #createDate="scope">
        {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #updateDate="scope">
        {{ scope.row.updateDate.replace("T", " ").split(".")[0] }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openOrderDetailViewDialog(scope.row)">查看成本明细</el-button>
      </template>
    </ProTable>

    <el-dialog width="50%" title="订单明细" v-model="detailViewDialogVisible" style="height: 550px">
      <div class="table-box" style="height: 450px">
        <ProTable
          :toolButton="[]"
          ref="orderDetailViewProTable"
          :initParam="detailViewInitParam"
          :columns="detailTableColumns"
          :request-api="queryOrderDetailList"
        >
          <template #createDate="scope">
            {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
          </template>
          <template #updateDate="scope">
            {{ scope.row.updateDate.replace("T", " ").split(".")[0] }}
          </template>
          <template #isOffshoreProcurement="scope">
            <el-tag>{{ scope.row.isOffshoreProcurement === 1 ? "是" : "否" }}</el-tag>
          </template>
          <template #offshoreProcurementReceipts="scope">
            <el-link
              v-if="scope.row.offshoreProcurementReceipts"
              :href="scope.row.offshoreProcurementReceipts"
              target="_blank"
              :underline="false"
              type="primary"
              rel="noopener noreferrer"
            >
              <el-icon style="margin-right: 3px"><View /></el-icon>
              查看外采单据
            </el-link>
          </template>
          <!-- 表格操作 -->
          <!-- <template #operation="scope">
            <el-button type="primary" link :icon="Delete">删除</el-button>
          </template> -->
        </ProTable>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="orderManage">
import { ref, reactive, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, ElementPlus, More } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { orderStatusEnum, statusEnum, statusFieldNames } from "@/enums/httpEnum";
import {
  CreateOrderParam,
  EditOrderInfoParam,
  HxOrderDetail,
  QueryOrderDetailListParam,
  QueryOrderResult
} from "@/api/interface/order";
import {
  createOrder,
  editOrderInfo,
  editOrderStatus,
  queryMyOrderList,
  queryOrderDetailList,
  queryOrderList
} from "@/api/modules/order";
import { HxCustomers } from "@/api/interface/customers";
import { queryCustomers } from "@/api/modules/customers";

const proTable = ref<ProTableInstance>();

const columns = reactive<ColumnProps<QueryOrderResult>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { type: "index", label: "", width: 80 },
  {
    prop: "orderNumber",
    label: "订单编号",
    width: 150,
    search: { el: "input", tooltip: "请输入订单编号" }
  },
  {
    prop: "orderName",
    label: "订单名称",
    width: 120,
    search: { el: "input", tooltip: "请输入订单名称" }
  },

  {
    prop: "orderStatus",
    label: "订单状态",
    width: 120,
    tag: true,
    enum: orderStatusEnum,
    search: { el: "select", props: { filterable: true } },
    fieldNames: statusFieldNames
  },
  {
    prop: "totalAmount",
    label: "订单金额",
    width: 120
  },
  {
    prop: "cost",
    label: "成本"
  },
  {
    prop: "profit",
    label: "利润"
  },
  {
    prop: "customersName",
    label: "客户名称",
    width: 120
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "createUserName",
    label: "创建人",
    width: 120
  },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

const detailViewDialogVisible = ref(false);

const orderDetailViewProTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const detailViewInitParam = reactive<QueryOrderDetailListParam>({ orderId: "", status: 1 });

const detailTableColumns = reactive<ColumnProps<HxOrderDetail>[]>([
  { type: "index", label: "", width: 80 },
  {
    prop: "commodityName",
    label: "商品名称",
    width: 150
  },
  {
    prop: "commodityCount",
    label: "商品编码",
    width: 120
  },

  {
    prop: "totalAmount",
    label: "总金额"
  },
  {
    prop: "isOffshoreProcurement",
    label: "是否外采",
    width: 100
  },
  {
    prop: "offshoreProcurementReceipts",
    label: "外采单据",
    width: 150
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "createUserName",
    label: "创建者",
    width: 200
  },
  {
    prop: "previewDate",
    label: "审核时间",
    width: 200
  },
  {
    prop: "previewUserName",
    label: "审核者",
    width: 200
  }
  // { prop: "operation", label: "操作", fixed: "right", width: 100 }
]);

const openOrderDetailViewDialog = (param: QueryOrderResult) => {
  detailViewDialogVisible.value = true;
  detailViewInitParam.orderId = param.orderId;

  nextTick(() => {
    if (orderDetailViewProTable.value) {
      orderDetailViewProTable.value.searchInitParam.orderId = param.orderId;
      orderDetailViewProTable.value.getTableList();
    }
  });
};

/** 修改订单状态 */
const updateOrderStatus = async (param: QueryOrderResult, status: number) => {
  await editOrderStatus({ orderId: param.orderId, orderStatus: status });
  ElMessage.success("修改订单状态成功");
};
</script>
